<template>
	<div>
		<el-row :span="24">
			<el-col :span="14">
				<basic-container>
					<avue-data-display :option="isAdmin?option1:option11"></avue-data-display>
					<avue-data-progress v-if="isAdmin" :option="option3" style="padding:20px 0;"></avue-data-progress>
					<avue-data-tabs v-if="isAdmin" :option="option"></avue-data-tabs>
				</basic-container>
			</el-col>
			<el-col :span="10">
				<basic-container>
					<el-row class="containerBox">
						<el-col :span="10" style="display: flex;align-items: center;justify-content: center">
							<div class="user-box">
								<div style="width: 80px;height: 80px;border-radius: 50%;overflow: hidden;">
									<img style="width: 100%;height: 100%;" :src="userInfo.avatar"></img>
								</div>
								<div style="font-size: 16px;color: #000;font-weight: 700;margin-top: 10px;">{{userInfo.name}}</div>
								<div style="font-size: 16px;color: #999;margin-top: 10px;">{{organizationName || ''}}</div>
							</div>
						</el-col>
						<el-col :span="14">
							<div class="hypermarket">
								<!--						<div class="hypermarkTop"></div>-->
								<div class="hyperTitle">商城公告</div>
								<div class="hyperListBox" style="overflow:auto">
									<div class="hyperList" @click="checkCmsDetail(item.id)" v-for="(item, index) in hyperList" :key="index">
										<div style="display: flex;align-items: center;width: 100%;">
											<i class="el-icon-bell"></i>
											<div class="hyperListName">{{item.title || ''}}</div>
										</div>
											<div style="float: right;width: 100%;text-align: right">{{item.addTime.substring(0,10) || ''}}</div>
									</div>
								</div>
							</div>
						</el-col>
					</el-row>
					<avue-data-display style="padding:40px 0 0;" v-if="isAdmin" :option="option2"></avue-data-display>
				</basic-container>
			</el-col>
		</el-row>
		<el-row :span="24" v-if="!isAdmin">
			<el-col :span="24">
				<basic-container>
<!--					<avue-data-icons :option="isAdmin?option1:option11"></avue-data-icons>-->
<!--					<avue-data-progress v-if="isAdmin" :option="option3" style="margin-bottom:20px"></avue-data-progress>-->
					<avue-data-tabs  :option="option"></avue-data-tabs>
				</basic-container>
			</el-col>
		</el-row>
		<el-drawer :visible.sync="dialogTableVisible" size="70%">
			<div class="outDiv">
				<div class="upDiv">
					<h3 align="center" class="spanClass">{{ obj.title }}</h3>
				</div>
				<div class="upDiv">
					<p align="center" class="spanClassTime">{{ obj.addTime }}</p>
				</div>
				<div class="downDiv">
					<li style="margin-left: 10px" v-html="obj.content">{{ obj.content }}</li>
				</div>
				<!-- <div class="footDiv"><el-button size="mini" class="btnSty" @click="cancel()">关 闭</el-button></div> -->
			</div>
		</el-drawer>
	</div>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	import {
		adminhomeInfo,
		adminhomeSystem,
		adminhomeOrder,
		adminhomeAccount,
		getDetail,
		storeCms,
		listTreeBylevelM
	} from '@/api/index/adminhome'
	export default {
		name: 'adminHome',
		data() {
			return {
				hyperList:[],
				indexData: null,
				option: {
					span:12,
					data: [],
				},
				option3: {
					span: 8,
					data: [],
				},
				option1: {
					span: 6,
					data: [],
				},
				option2: {
					span: 8,
					data: [],
				},
				option11: {
					span: 8,
					data: [],
				},
				isAdmin:false, // 是否是集团身份
				dialogTableVisible:false,
				obj:{},
				organizationName:'',//所属区域名字
			}
		},
		computed: {
			...mapGetters(["userInfo"]),
		},
		async created() {
			this.isAdmin = this.userInfo.roleIds.includes(1) || this.userInfo.roleIds.includes(8)
			this.isQuYu = this.userInfo.roleIds.includes(10) || this.userInfo.roleIds.includes(11)
			this.isUnit = this.userInfo.roleIds.includes(12)
			let organization = this.userInfo.organizationId
			console.log('admin',this.isAdmin)
			if(this.isAdmin) {
				this.listTreeBylevelMFn(1,organization)
			}else if(this.isQuYu) {
				this.listTreeBylevelMFn(2,organization)
			}else if(this.isUnit) {
				this.listTreeBylevelMFn(3,organization)
			}
			await adminhomeInfo().then(res => {
				if (res.data.code == 200) {
					if(res.data.data){
						this.indexData = res.data.data;
					}
				}
			})
			await adminhomeAccount().then(res => {
				if (res.data.code == 200) {
					if(res.data.data){
						Object.assign(this.indexData, res.data.data)
					}	
				}
			})
			await adminhomeSystem().then(res => {
				if (res.data.code == 200) {
					if(res.data.data){
						Object.assign(this.indexData, res.data.data)
					}
				}
			})
			await adminhomeOrder().then(res => {
				if (res.data.code == 200) {
					if(res.data.data){
						Object.assign(this.indexData, res.data.data)
					}
				}
			})
			await storeCms().then(res => {
				if (res.data.code == 200) {
					if (res.data.data) {
						Object.assign(this.indexData, res.data.data);
					}
				}
			});
			setTimeout(()=>{
				this.hyperList = this.indexData.cmsInfo;
				console.log('hyperList',this.indexData)
				this.option3.data = [{
						title: this.$t("wel.data3.column1"),
						color: "rgb(178, 159, 255)",
						count: Number(this.indexData.orderPayRatio.slice(0, -1))
					},
					{
						title: this.$t("wel.data3.column2"),
						color: "rgb(230, 71, 88)",
						count: Number(this.indexData.orderBackRatio.slice(0, -1))
					},
					{
						title: this.$t("wel.data3.column3"),
						color: "rgb(230, 71, 88)",
						count: Number(this.indexData.orderCancelRatio.slice(0, -1))
					}
				]
				console.log(this.indexData.newUserNum,'111111111111111111111');
				this.option1.data = [{
						title: this.$t("wel.data4.column1"),
						count: Number(this.indexData.newUserNum),
						/*icon: "el-icon-s-custom",
						color: "rgb(49, 180, 141)",*/
						href: "/#/admin/userManagement/mgr"
					},
					{
						title: this.$t("wel.data4.column2"),
						count: Number(this.indexData.newStoreNum),
						/*icon: "el-icon-s-shop",
						color: "rgb(56, 161, 242)",*/
						href: "/#/base/store/store"
					},
					{
						title: this.$t("wel.data4.column3"),
						count: Number(this.indexData.newOrderNum),
						/*icon: "el-icon-s-order",
						color: "rgb(117, 56, 199)",*/
						href: "/#/base/transaction/orderForm"
					},
					{
						title: this.$t("wel.data4.column4"),
						count: Number(this.indexData.newGoodsNum),
						/*icon: "el-icon-s-goods",
						color: "rgb(230, 71, 88)",*/
						href: "/#/base/goods/goods"
					}
				]

				this.option11.data = [
					{
						title: this.$t("wel.data4.column2"),
						count: this.indexData.newStoreNum,
						icon: "el-icon-s-shop",
						color: "rgb(56, 161, 242)",
						href: "/#/base/store/store"
					},
					{
						title: this.$t("wel.data4.column3"),
						count: this.indexData.newOrderNum,
						icon: "el-icon-s-order",
						color: "rgb(117, 56, 199)",
						href: "/#/base/transaction/orderForm"
					},
					{
						title: this.$t("wel.data4.column4"),
						count: this.indexData.newGoodsNum,
						icon: "el-icon-s-goods",
						color: "rgb(230, 71, 88)",
						href: "/#/base/goods/goods"
					}
				]

				this.option2.data = [{
						title: this.$t("wel.data2.column1"),
						count: this.indexData.sumUserNum,
						icon: "el-icon-pie-chart",
						href: "/#/admin/userManagement/mgr"
					},
					{
						title: this.$t("wel.data2.column2"),
						count: this.indexData.todayLogin,
						icon: "el-icon-files",
						href: "/#/admin/loginLog"
					},
					{
						title: this.$t("wel.data2.column3"),
						count: this.indexData.sumGoodsNum,
						icon: "el-icon-box",
						href: "/#/base/store/store"
					},
					// {暂时去掉
					// 	title: this.$t("wel.data2.column4"),
					// 	count: this.indexData.sumGoodsGradeUpNum,
					// 	icon: "el-icon-data-line",
					// 	href: "JavaScript:void(0)"
					// }
				]
				this.option.data = [{
						title: '订单总数',
						subtitle: this.$t("wel.data.subtitle"),
						count: this.indexData.sumOrderNum,
						allcount: '',
						text: this.$t("wel.data.text1"),
						color: "rgb(27, 201, 142)",
						key: this.$t("wel.data.key1"),
						href:'/#/base/transaction/orderForm'
					},
					{
						title: this.$t("wel.data.column2"),
						subtitle: this.$t("wel.data.subtitle"),
						count: this.indexData.sumOrderMoney,
						allcount: '',
						text: this.$t("wel.data.text2"),
						color: "rgb(230, 71, 88)",
						key: this.$t("wel.data.key2")
					},
				]
			},1000)
		},
		methods: {
			listTreeBylevelMFn(level,organization) {

				listTreeBylevelM(level).then(res=>{
					if(res.data.code==200) {
						let obj = res.data.data.filter(item=>{
							return item.id == organization
						})
						console.log('obj',obj)
						this.organizationName = obj[0].name
						console.log('organization',this.organizationName)
					}else {
						this.$message({
							message: res.data.message,
							type: 'error'
						});
					}
				})
			},
			checkCmsDetail(val) {
				// this.$router.push({path:'../../cms/showCmsArticleDetail',query:{ id:val}});
				// showCmsArticleDetail
				getDetail(val).then(res => {
					if (res.data.code == 200) {
						this.obj = res.data.data;
						this.obj.content = this.obj.content.replace(/<p><img/g,"<p style='overflow: hidden;font-size: 0;line-height: 0;margin-top: -1px;padding-top: 10px;text-align: center;'><img style='width: 100%;height: auto;'")
						this.obj.content = this.obj.content.replace(/<img/g,"<img style='width: 100%;height: auto;'")
						this.dialogTableVisible = true;
					} else {
						this.$message({
							message: res.data.message,
							type: 'error'
						});
						return;
					}
				});
			},
		},

	}
</script>
<style scoped="scoped" lang="scss">
	.wel {
		&__header {
			padding: 25px 40px;
			border-bottom: 1px solid #e8e8e8;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		&__info {
			display: flex;
			align-items: center;

			&-img {
				border-radius: 72px;
				display: block;
				width: 72px;
				height: 72px;

				img {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			&-content {
				position: relative;
				margin-left: 24px;
				color: rgba(0, 0, 0, 0.45);
				line-height: 22px;
			}

			&-title {
				font-size: 20px;
				line-height: 28px;
				font-weight: 500;
				color: rgba(0, 0, 0, 0.85);
				margin-bottom: 12px;
			}

			&-subtitle {
				position: relative;
				font-size: 14px;
				color: rgba(0, 0, 0, 0.45);
				line-height: 22px;
			}
		}

		&__extra {
			&-item {
				position: relative;
				padding: 0 32px;
				display: inline-block;

				&:last-child {
					&::after {
						display: none;
					}
				}

				&:after {
					background-color: #e8e8e8;
					position: absolute;
					top: 30px;
					right: 0;
					width: 1px;
					height: 40px;
					content: "";
				}
			}

			&-title {
				color: rgba(0, 0, 0, 0.45);
				font-size: 14px;
				line-height: 22px;
				margin-bottom: 4px;
			}

			&-subtitle {
				color: rgba(0, 0, 0, 0.85);
				font-size: 30px;
				line-height: 38px;
				margin: 0;

				span {
					color: rgba(0, 0, 0, 0.45);
					font-size: 20px;
				}
			}
		}
	}
	.containerBox {
		display: flex;
		align-content: center;
		width: 100%;
		/*height:100px;*/
		padding: 10px 0;
		border-radius: 10px;
		box-shadow: 2px 2px 15px 2px rgba(225,225,225,.3);
		.user-box {
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-direction: column;
		}
	}
	.hypermarket {
		/*margin: 20px 10px 0;*/
		padding: 10px 0;
		position: relative;
		border-radius: 4px;
		background-color: #fff;
		/*-webkit-box-shadow: 1px 2px 10px #eee;*/
		/*box-shadow: 1px 2px 10px #eee;*/
		.hypermarkTop {
			width: 100%;
			height: 6px;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 4px 4px 0 0;
			/*background-color: rgb(239, 72, 104);*/
		}
		.hyperTitle {
			text-align: center;
			/*padding: 20px 0;*/
			font-size: 20px;
			font-weight: 700;
		}
		.hyperListBox {
			min-height: 140px;
			max-height: 140px;
			margin-right: 10px;
		}
		.hyperListBox .hyperList:nth-child(2n + 1) {
			background-color: #fef8ec;
		}
		.hyperList {
			list-style: none;
			height: 36px;
			/*line-height: 36px;*/
			/*margin: 0 20px;*/
			padding: 0 10px;
			color: #666;
			font-size: 10px;
			border-bottom: 1px dashed #f5f6f7;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			/*align-items: center;*/
			justify-content: space-around;
		}
		.hyperListName {
			max-width: calc(100% - 14px);
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding-left: 5px;
			cursor: pointer;
		}
	}
	/*	文章详情样式*/
	.outDiv {
		margin: 20px;
		margin-top: -32px;
	}
	.upDiv {
		height: 10%;
	}
	.spanClass {
		padding: 10px 0;
		font-weight: 600;
	}
	.spanClassTime {
		padding: 5px 0 30px;
	}
	.downDiv {
		height: 80%;
		overflow-y: auto;
		min-height: 200px;
	}
	.footDiv {
		height: 10%;
		text-align: center;
	}
	.btnSty {
		border: none;
		padding: 8px 25px;
		border-radius: 3px;
		border: 1px solid #007aff;
		color: #007aff;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 14px;
		margin: 30px auto;
	}
	/deep/ .el-progress {
		cursor: default!important;
	}
	/deep/ .item-header {
		cursor: default!important;
	}
</style>
